<!-- 筛选组件 -->
<template>
	<view class="select" >
		<div style="height: 400px;	overflow: auto ;">
			<div class="select_one" v-for="(item,index) in title">
				<div class="select_title">
					{{item}}
				</div>
				<div class="select_tow" >
					<text v-for="(item,index) in dataSorce">{{item.areaName}}</text>
				</div>
			</div><br><br>
			<div class="select_botton">
				<text>清空</text>
				<text style="background-color: #0b877f;color: #fff;">确定</text>
			</div>
			
		</div>
			<div style="height: 250px;" @click="overflas"></div>
		
		
	</view>
</template>

<script>
	import popus from '@/uni_modules/uni-popup/components/uni-popup/uni-popup'
	import {list,pages,city} from '@/common/api/job/jobapi.js'
export default {
	components:{
	},
	data(){
		return {
			title:['城市'],
			dataSorce:[]
		}
	},
	mounted() {
		this.city();
	},
	methods:{
		city(){
			 city({current:'1',size: '-1'}).then((result) => {
				 this.dataSorce = result.data;
			 })
		},
		open() {
		            this.$refs.popup.open('bottom')
		        },
		close() {
		            this.$refs.popup.close()
		        },
		overflas(){
			this.$emit('oushow',0)
		}		
	}
}
</script>

<style scoped lang="scss">
.select {
	height: 500px;  
	// background-color: #fff;
}
.select_one {
	 width: 100%;
	 background-color: #fff;
	 overflow: hidden ;
	  .select_tow {
		  height: 100%;
		  padding:10rpx 10rpx 10rpx 10rpx;
		  display: flex;
		  flex-wrap: wrap;
		  margin-bottom: 10rpx;
	  }
	   .select_tow text{
			padding: 5rpx 50rpx 5rpx 50rpx;
			border-radius: 4rpx;
			margin-left: 10rpx;
			margin-top: 10rpx;
			margin-bottom: 5rpx;
		    background-color: #ededed;
	   }
	.select_title {
		margin-left: 20rpx;
		margin-top: 10rpx;
	}
}
.select_botton {
	position: fixed;
	top: 470px; 
	width: 100%;
	display: flex;
	background-color: #fff;
	padding-bottom: 9px;
	padding-top: 10px;
	justify-content: space-around;
}

.select_botton text{
	background-color: #ededed;
	padding: 3% 18% 3% 18%;
	text-align: center;
	border-radius: 4px;
}
</style>
